<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue';

import { Plus } from '@vben/icons';

import dayjs from 'dayjs';
import { ElMessage, ElMessageBox } from 'element-plus';

import {
  deleteAccountByID,
  reqAccountList,
  reqInitAccount,
} from '#/api/exchange-center';

import { accountColumn } from '../indexcolumn';
import BatchAdd from './BatchAdd.vue';
import Edit from './Edit.vue';

const props = defineProps(['platform']);

const emit = defineEmits(['socket', 'refreshGroup']);

const current = ref<object>({});
const isVisible = ref<boolean>(false);
const isAdd = ref<boolean>(false);
const pager = ref({
  page: 1,
  limit: 20,
});
const total = ref(0);

const tableData = ref<Array<object>>([]);
const getList = async () => {
  // console.log('inner', props.platform);
  const params = {
    ...pager.value,
    platform_id: props.platform.id,
  };
  // console.log('inner', params);
  const data = await reqAccountList(params);
  tableData.value = data.list;
  total.value = data.total;
};

const hangleOperate = (type: Number, row?: any) => {
  current.value = row;
  switch (type) {
    case 1: {
      // 编辑
      isAdd.value = false;
      isVisible.value = true;
      break;
    }
    case 2: {
      // 删除
      ElMessageBox.confirm('确定进行删除操作?', '提示', {
        type: 'warning',
      }).then(async () => {
        await deleteAccountByID(row.id);
        ElMessage({ type: 'success', message: '操作成功' });
        emit('refreshGroup');
        getList();
      });

      break;
    }
    case 3: {
      current.value = {};
      isAdd.value = true;
      isVisible.value = true;
      break;
    }
    case 4: {
      emit('socket', row);
      break;
    }
    case 5: {
      // 批量添加
      initAccount(0, 'all');
      break;
    }
  }
};
watch(
  [() => pager.value],
  () => {
    getList();
  },
  { deep: true },
);

watch(
  [() => props.platform.id],
  () => {
    // console.log('watch', props.platform.id);
    getList();
  },
  { deep: true },
);

// 刷新
const refresh = () => {
  isVisible.value = false;
  emit('refreshGroup');
  getList();
};

onMounted(() => {
  getList();
});
// 账号初始化

const initAccount = async (id: number, type = 'single') => {
  ElMessageBox.confirm('确定进行初始化操作?', '提示', {
    type: 'warning',
  }).then(async () => {
    await reqInitAccount({
      id: type === 'single' ? id : '',
      platform_id: props.platform.id,
    });
    ElMessage({ type: 'success', message: '操作成功' });
    emit('refreshGroup');
    getList();
  });
};
</script>

<template>
  <div class="page-content h-full">
    <div class="flex justify-between space-x-3">
      <div class="flex space-x-3">
        <el-button
          :icon="Plus"
          type="primary"
          class="add-btn"
          @click="hangleOperate(3)"
        >
          新增
        </el-button>
        <BatchAdd />
      </div>
      <el-button type="primary" class="add-btn" @click="hangleOperate(5)">
        全部初始化
      </el-button>
    </div>

    <ReTable
      :columns="accountColumn"
      :data="tableData"
      :height="560"
      :pager="pager"
      :total="total"
      :page-sizes="[20, 30, 50]"
    >
      <template #status="scope">
        <el-tag :type="scope.row.status ? 'success' : 'danger'">
          {{ scope.row.status ? '启用' : '停用' }}
        </el-tag>
      </template>
      <template #connect="scope">
        <el-tag :type="scope.row.connect ? 'success' : 'danger'">
          {{ scope.row.connect ? '已连接' : '未连接' }}
        </el-tag>
      </template>
      <template #init="scope">
        <el-tag :type="scope.row.default ? 'success' : 'danger'">
          {{ scope.row.default ? '已初始化' : '未初始化' }}
        </el-tag>
      </template>
      <template #time="scope">
        {{ dayjs(scope.row.updated_at).format('YYYY-MM-DD HH:mm:ss') }}
      </template>
      <template #operation="scope">
        <el-button @click="hangleOperate(1, scope.row)" type="primary" link>
          编辑
        </el-button>
        <el-button @click="hangleOperate(2, scope.row)" type="danger" link>
          删除
        </el-button>
        <el-button @click="initAccount(scope.row.id)" type="success" link>
          初始化
        </el-button>
      </template>
    </ReTable>

    <Edit
      v-model:visible="isVisible"
      v-if="isVisible"
      :is-add="isAdd"
      :current="current"
      :platform="platform"
      @refresh="refresh"
    />
  </div>
</template>

<style lang="scss" scoped>
.page-content {
  padding: 20px;
  background-color: hsl(var(--background));
  border-radius: 4px;
}

.add-btn {
  margin: 0 0 16px;
}
</style>
